<template>
  <div class="session-feature">
    <div class="session-list boder-sty">
      <div class="select-box">
        预报降雨类型：
        <el-select
          v-model="rainType"
          placeholder="请选择"
          filterable
          @change="handleExamSchemeCcList"
        >
          <el-option
            :key="index + item"
            v-for="(item, index) in rainTypeArr"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </div>

      <el-table :data="ccList" border style="width: 100%">
        <el-table-column align="center" label="单选" width="60">
          <template #default="scope">
            <el-radio v-model="ccRadio" :label="scope.row.id">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="scName" label="场次名称" align="center" width="200">
          <template #default="scope">
            <el-tooltip
              :content="scope.row.scName"
              placement="top"
              :disabled="scope.row.scName.length < 15"
            >
              <span>{{
                scope.row.scName.length > 15
                  ? scope.row.scName.slice(0, 15) + '...'
                  : scope.row.scName
              }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="createType" label="创建类型" align="center" width="100" />

        <el-table-column prop="yrPerd" label="预热期" align="center" />
        <el-table-column prop="yjPerd" label="预见期" align="center" />
        <el-table-column prop="fcTime" label="预报时间" align="center" width="180" />
        <el-table-column prop="isCheck" label="状态" align="center">
          <template #default="scope">
            <span :class="scope.row.isCheck == '已评定' ? 'activeGreen' : 'activeRed'">
              {{ scope.row.isCheck }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="150" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEvaluateClick(scope.row)"
              >评定</el-button
            >
            <el-button link type="danger" size="small" @click="handleDeleteClick(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="feature-list boder-sty">
      <div class="title-span">
        <span>场次特征值</span>
        <el-button type="info" class="btn-plus" link @click="handleOpenDialog">
          <el-icon>
            <FullScreen />
          </el-icon>
        </el-button>
      </div>
      <el-table border :data="featureList" :span-method="objectSpanMethod" class="table-box">
        <el-table-column
          prop="blknm"
          label="预报断面"
          align="center"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          prop="proj"
          label="计算项"
          align="center"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column prop="mxq" label="洪峰流量" align="center" width="100"></el-table-column>
        <el-table-column prop="mxt" label="洪现时间" align="center" width="200"></el-table-column>
        <el-table-column prop="mxz" label="洪峰水位" align="center" width="100"></el-table-column>
        <el-table-column prop="v" label="洪量" align="center"></el-table-column>
        <el-table-column prop="ord" label="排序" align="center"></el-table-column>
      </el-table>
    </div>
    <feature-dialog ref="featureDialogRef" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import FeatureDialog from './cpns/feature-dialog/index.vue'
import {
  getExamSchemeCcList,
  getExamSchemeEigList,
  calcSchemeQuality
} from '@/services/modules/model-exam'
import {
  // 加入考核
  joinSetCheck
} from '@/services/modules/dispatch-manage.js'
const props = defineProps({
  calcScid: {
    type: Number,
    default: 0
  }
})
const rainType = ref(null)
// 场次列表
const ccList = ref([])
// 场次特征值列表
const featureList = ref([])
// 选择的场次
const ccRadio = ref(0)
//场次评定
const handleEvaluateClick = (row) => {
  calcSchemeQuality({ scid: row.id }).then((res) => {
    if (res.code === 200) {
      handleExamSchemeCcList()
    }
  })
}
// 删除
const handleDeleteClick = (row) => {
  ElMessageBox.confirm(`是否删除${row.scName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      joinSetCheck({ scid: row.id, isCheck: 0 }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('操作成功')
          handleExamSchemeCcList()
        }
      })
    })
    .catch(() => {})
}
// 获取场次列表
const handleExamSchemeCcList = () => {
  ccRadio.value = ''
  getExamSchemeCcList({
    calcScid: props.calcScid,
    rainType: rainType.value
  }).then((res) => {
    if (res.code === 200) {
      ccList.value = res.data
      // 默认选择第一个 场次
      if (ccList.value.length) ccRadio.value = ccList.value[0].id
    }
  })
}
// 预报降雨类型列表
const rainTypeArr = ref([
  { name: '全部', id: null },
  { name: '落地雨', id: 0 },
  { name: '数值预报', id: 2 },
  { name: '短临预报', id: 3 },
  { name: '短临+数值', id: 4 }
])
const featureDialogRef = ref(null)

const handleOpenDialog = () => {
  featureDialogRef.value.handleOpenDialog(featureList.value)
}
// 获取特征值列表
const handleByCcGetEigList = () => {
  getExamSchemeEigList({ scid: ccRadio.value }).then((res) => {
    if (res.code === 200) {
      featureList.value = res.data
    }
  })
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 4 === 0) {
      return {
        rowspan: 4,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
// 根据计算方案编号，查询场次列表
watch(
  () => props.calcScid,
  () => {
    handleExamSchemeCcList()
  },
  {
    immediate: true
  }
)
// 根据场次编号 查询特征值列表
watch(
  () => ccRadio.value,
  () => {
    handleByCcGetEigList()
  },
  {
    immediate: true
  }
)
</script>

<style lang="less" scoped>
.session-feature {
  display: flex;
  height: 100%;
  .table-box {
    height: calc(100% - 50px);
  }
  .boder-sty {
    height: 100%;
    border: 1px solid #149bd5;
    // padding-top: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    .select-box {
      display: flex;
      align-items: center;
      margin-left: 20px;
      height: 50px;
    }

    .title-span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 10px 0 20px;
      height: 50px;
      font-size: 16px;
      font-weight: 600;
    }
    .btn-plus {
      font-size: 25px;
      font-weight: bold;
    }
  }
  .session-list {
    width: 600px;
    .el-form {
      display: flex;
      align-items: center;
      height: 50px;
    }
    .activeGreen {
      color: green;
    }
    .activeRed {
      color: red;
    }
  }
  .feature-list {
    width: calc(100% - 610px);
    margin-left: 10px;
  }
  .el-table {
    height: calc(100% - 50px);
    border-radius: 0 0 5px 5px;
  }
}
</style>
